<!--
 * @Author: wanglidong
 * @Date: 2021-04-08 09:23:01
 * @LastEditTime: 2021-08-17 08:39:44
 * @LastEditors: your name
 * @Description:
 * @FilePath: \cqgsBussPage\src\components\wrap\meterage\change-measurement\change-measurement-detail\change-measurement-detail.vue
 * @nbsg
-->
<template>
  <div class="pre-archive-detail">
    <el-dialog width="70%" class="WholeScroll" :visible.sync="formShow" @close="handleClickDeal('cancel')" v-dialog-drag :modal-append-to-body="false" :close-on-click-modal="false">
      <span slot="title">
        <i class="iconfont icon-zhiliangguanli1"></i>
        <span>{{ title }}</span>
      </span>

      <div class="WholeScroll" style="max-height: 650px; overflow: auto">
        <el-tabs v-model="activeName" style="width:100%;">
          <el-tab-pane label="基本信息" name="first">
            <div class="WholeScroll">
              <el-form :model="formBaseData" ref="formBaseData" :rules="formBaseRules" style="position: relative" v-if="activeName == 'first'">

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="公司" prop="companyId" :label-width="formlabelWidth">
                      <el-select class="select" v-on:change="getProjectByCompanyId()" value-key="id" v-model="formBaseData.companyId" placeholder="选择公司" style="width: 100%" :disabled="detailType === 'check' || detailType === 'approve' " clearable>
                        <el-option v-for="item in companyTree" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目" prop="projectId" :label-width="formlabelWidth">
                      <el-select class="select" v-on:change="getSectionByProjectId()" style="width: 100%" value-key="id" v-model="formBaseData.projectId" placeholder="选择项目" :disabled="detailType === 'check'|| detailType === 'approve' " clearable>
                        <el-option v-for="item in projectTree" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="标段" prop="sectionId" :label-width="formlabelWidth">
                      <el-select class="select" value-key="id" v-model="formBaseData.sectionId" v-on:change="getParticipantUser()" placeholder="选择标段" style="width: 100%" :disabled="detailType === 'check'|| detailType === 'approve'" clearable>
                        <el-option v-for="item in sectionTree" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="标题" prop="titleName" :label-width="formlabelWidth">
                      <el-input size="small" v-model="formBaseData.titleName" placeholder="" :disabled="detailType === 'check'"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="类型" prop="typeId" :label-width="formlabelWidth">
                      <el-select class="select" style="width: 100%" value-key="id" v-model="formBaseData.typeId" placeholder="类型" :disabled="detailType === 'check'|| detailType === 'approve' ">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="培训时间" prop="trainingDate" :label-width="formlabelWidth">
                      <el-date-picker style="width:100%;" v-model="formBaseData.trainingDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :disabled="detailType === 'check'"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="培训地点" style="width: 100%" prop="trainingLocation" :label-width="formlabelWidth">
                      <el-input size="small" v-model="formBaseData.trainingLocation" placeholder="" :disabled="detailType === 'check'"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!--<el-row>
                  <el-col :span="24">
                    <el-form-item label="参与人" prop="participantUser" :label-width="formlabelWidth">
                      <el-input size="small" v-model="formBaseData.participantUser" placeholder=""
                                :disabled="detailType === 'check'"></el-input>
                    </el-form-item>

                  </el-col>
                </el-row>-->
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="参与人" prop="participantUser" :label-width="formlabelWidth">
                      <el-cascader :options="selectList.participantUserList" :props="props2" class="contract-ele" v-model="formBaseData.participantUser" :disabled="detailType === 'check'||detailType=='approve'" clearable>
                      </el-cascader>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="内容" prop="remark" :label-width="formlabelWidth">
                      <el-input class="fill" type="textarea" :autosize="{ minRows:6, maxRows: 20}" placeholder="" v-model="formBaseData.remark" :disabled="detailType === 'check'">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="岗前教育图片" :label-width="formlabelWidth">
                      <cmsUploadFileView ref="fileOneImg" :detail-id="detailId" :fileSystem="fileSystemImg['two']" :disabled="detailType!=='build'&&detailType!=='edit'" type="mul" :fileList="fileListArr" info="支持上传 png/jpg/jpeg 文件" :detail-type="detailType" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="24">
                    <el-form-item label="视频" :label-width="formlabelWidth" prop="videoList">
                      <cmsUploadVideoView :file-list="fileList_video" ref="fileTwo" :detail-id="detailId" :fileSystem="fileSystemvideo['one']" filePart="video" type="mul" :disabled="detailType!=='build'&&detailType!=='edit'" @change="changeVideo" :detail-type="detailType">
                      </cmsUploadVideoView>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row v-if="formShow">
                  <el-col :span="24">
                    <div class="formTitle">附件</div>
                    <cmsFileTable ref="cmsFileTable" :buildUnitTable="buildUnitTable" :fileSystem="fileSystem" :detailId="detailId" :detailType="detailType" :buttonDelShow="buttonDelShow" :showNone="showNone" :buttonCheckShow="buttonCheckShow" :buttonUploadShow="buttonUploadShow" @change="tableChange">
                    </cmsFileTable>
                  </el-col>
                </el-row>

                <!--<el-row>
                  <el-col :span="24">
                    <bpmn-form v-if="isShowBpmn" ref="bpmnForm" :multiple="isMultiple" proc-def-key="changeMeasureProcess" :business-id="formBaseData.id"
                               :url="attributeUrl" :entity="formBaseData"  :formlabelWidth="formlabelWidth"
                               @complete="onComplete" :needInit="false" :variables="variables"></bpmn-form>
                  </el-col>
                </el-row>-->
              </el-form>
            </div>

          </el-tab-pane>
          <!--<el-tab-pane label="审批记录" name="second" v-show="activeName == 'second'">
            <wf-process :inst-id="formBaseData.procInstId" :url="urlProcess"/>
          </el-tab-pane>-->
        </el-tabs>
      </div>

      <div slot="footer" class="dialog-footer">
        <!--api操作按钮 除去上报-->
        <!--新建和编辑的暂存上报-->

        <!--:loading="isLoading" -->
        <template v-if="detailType === 'build' || detailType === 'edit'">
          <el-button size="small" type="primary" :loading="isLoading" @click="handleClickDeal('submit', { flag: 1 })"><i class="iconfont icon-icon_save"></i> 确 定
          </el-button>
        </template>
        <el-button size="small" @click="handleClickDeal('cancel')"><i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
} from '@/utils/publicFun'
import { preview } from '@/api/file'
import measurechange from '@/api/buss/measurechange'
import msgUtil from '@/utils/msgUtil'
import crudDict from '@/api/system/dict'
import projectSectionInfo from '@/api/buss/common'
import WfProcess from '@/components/WorkFlow/process/index'
import PopBtn from '@/components/ExtBpmn/Btn/index'
import BpmnForm from '@/components/ExtBpmn/ExtForm/bpmn-form'
import startMixin from '@/mixins/wfStartMixin'
import approveMixin from '@/mixins/wfApproveMixin'
export default {
  name: 'changeMeasurement-detail',
  components: {
    /* WfProcess,
     BpmnForm,
     PopBtn*/
  },
  /*mixins: [startMixin, approveMixin],*/
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      }
    }
  },
  watch: {
    postDetail(value) {
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type

      if (this.detailType == 'build') {
        this.fileListArr = []
        this.isShowBpmn = true
        this.title = '新增'
      } else if (this.detailType == 'check') {
        this.title = '查看详情'
      } else if (this.detailType == 'edit') {
        this.isShowBpmn = true
        this.title = '编辑'
      } else if (this.detailType == 'approve') {
        this.isShowBpmn = true
        this.title = '审核'
      } else {
        this.title = ''
      }
      this.$nextTick(() => {
        this.detailId = value.params === undefined ? '' : value.params.detailId
        if (this.detailType !== 'build') {
          this.getProjectSectionInfoTree('1');
          this.getDetail();
        } else {
          this.detailId = null;
          this.detailId = '';
          this.getProjectSectionInfoTree();

        }
      })
    }
  },
  data() {
    return {
      fileList_video: [],
      fileListArr: [],
      isShowBpmn: false,
      isMultiple: false,
      props2: { multiple: true },
      variables: {},
      entity: {},
      fileList: [],
      wfNode: {},
      showBpmnForm: false,
      setManage: '',//项目公司选项:1项目办，2指挥部

      readonly: false,

      clickIndex: 0,
      activeName_collapse: '0',
      nowBiangengName: '',
      collapseList: [],
      biangengList: [],

      companyTree: [],// 公司
      projectTree: [],
      sectionTree: [],
      changeCommondIdTree: [], // 变更令下拉
      isLoading: false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      detailActions: [], // 当前详情的操作项
      formShow: false, // 表单展示
      formlabelWidth: '130px', // 表单左侧标题宽度
      title: '',
      activeName: 'first',
      selectList: {
        participantUserList: [],
        BuildUnitUsersList: [],
        ParticipatingUnitUsersList: [],
        companyList: [],

        //
        propertiesFieldOptions: [
          {
            label: '属性',
            value: ''
          }
        ],
        //
        file: []
      },
      buildUnitTable: [
        {
          stuffName: '附件',
          part: 'partOne',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true
        }
      ],
      /*fileSystem: {
        'one': {
          sys: 'buss',
          module: 'safetyPreJobEducation',
          part: 'one',
          compoName: 'fileOne'
        }
      },*/
      fileSystem: {
        attachId: {
          partOne: '',
        },
        sys: 'buss',
        module: 'safetyPreJobEducation',
        entityClass: 'safetyPreJobEducation',
        viewByAnon: true,
        longLife: false,
        part: {
          partOne: 'partOne',
        }
      },

      fileSystemvideo: {
        'one': {
          sys: 'buss',
          module: 'safetyPreJobEducation',
          part: 'one',
          compoName: 'fileTwo'
        },
      },
      fileSystemImg: {
        'two': {
          sys: 'buss',
          module: 'safetyPreJobEducation',
          part: 'two',
          compoName: 'fileOneImg'
        },
      },

      formBaseData: {
        participantUser: [],
        id: '',
        companyId: '',
        projectId: '',
        sectionId: '',
        typeId: '',
        titleName: '',
        trainingDate: '',//培训时间
        participantUser: '',//培训人
        trainingLocation: '',//培训地点
        remark: '',
      }, // 表单基本信息内容
      typeList: [
        { id: '1', name: '班前教育' },
        { id: '2', name: '月度培训' },
      ],
      formBaseRules: {
        companyId: [
          {
            required: true,
            message: '请选择公司',
            trigger: 'change'
          }
        ], projectId: [
          {
            required: true,
            message: '请选择项目',
            trigger: 'change'
          }
        ], sectionId: [
          {
            required: true,
            message: '请选择标段',
            trigger: 'change'
          }
        ],
        typeId: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }
        ],
        titleName: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'change'
          }
        ],
        trainingDate: [
          {
            required: true,
            message: '请选择培训时间',
            trigger: 'change'
          }
        ],
      } // 表单基本信息验证
    }
  },
  created() {
    //this.getParticipantUser()

  },
  mounted() {

  },
  methods: {

    saveFiles() {
      this.$refs['fileOneImg'].saveAll(this.detailId)
      this.$refs['cmsFileTable'].bindAllFile(this.detailId)
      this.$refs['fileTwo'].saveAll(this.detailId)

    },




    cancelFunction() {

    },
    changeVideo(val) {
      this.$set(this, 'fileList_video', [...val])
    },


    fetchData() {
      this.$emit('reload')
    },

    cancel() {
      this.handleClickDeal('cancel')
    },





    onComplete(data) {
      this.wfNode = data
    },




    getParticipantUser() {
      this.$httpGet('/buss/safetyPreJobEducation/getParticipantUser?projectId=' + this.formBaseData.projectId + '&sectionId=' + this.formBaseData.sectionId
      ).then(res => {
        if (res.code == 200) {
          this.selectList.participantUserList = []
          this.selectList.participantUserList = res.data
        }

      })
    },

    // 公司下拉
    getProjectSectionInfoTree(first) {
      return projectSectionInfo.getProjectSectionInfoTree().then(res => {
        if (res.code === 200) {
          var data = res.data;
          this.companyTree = data;
          if (this.companyTree.length > 0) {
            if (this.detailType == 'build' && this.companyTree.length == 1) {
              this.formBaseData.companyId = this.companyTree[0].id;
            }
          }
          this.getProjectByCompanyId(first);
          /*return new Promise(reslove=>{
            reslove(res)
          })*/
        } else {
          msgUtil.error2(res.data.message)
        }
      })
      /*.catch(() => {
      msgUtil.error2("获取项目标段树失败")
    })*/
    },

    /**
     *  根据建设单位查询下面的所有项目
     * */
    getProjectByCompanyId(first) {
      if (first !== '1') {
        this.formBaseData.projectId = ''
      }
      this.companyTree.forEach((item) => {
        if (item.id === this.formBaseData.companyId) {
          this.projectTree = item.children
          console.log("projectTree=", this.projectTree)
          if (this.projectTree.length > 0) {
            if (this.detailType == 'build' && this.projectTree.length == 1) {
              this.formBaseData.projectId = this.projectTree[0].id;
            }
          } else {
            this.formBaseData.projectId = '';
          }
        }
      })
      if (this.formBaseData.companyId == '') {
        this.formBaseData.projectId = '';
      }
      // 项目存在时 查询标段
      this.getSectionByProjectId(first);
    },
    getSectionByProjectId(first) {
      this.sectionTree = []
      if (first !== '1') {
        this.formBaseData.sectionId = ''
      }
      if (this.formBaseData.projectId) {
        for (let i = 0; i < this.projectTree.length; i++) {
          if (this.projectTree[i].id == this.formBaseData.projectId) {
            this.sectionTree = this.projectTree[i].children
            if (!first) {
              if (this.sectionTree.length == 1) {
                this.formBaseData.sectionId = this.sectionTree[0].id
              }
            }
            break;
          }
        }
      }
      // if (!this.formBaseData.projectId) {
      //   this.formBaseData.sectionId = ''
      // }
      // this.sectionTree = []
      // if (this.formBaseData.projectId) {
      //   projectSectionInfo.getJlContList({ projectId: this.formBaseData.projectId }).then(res => {
      //     if (res.code === 200) {
      //       var data = res.data;
      //       this.sectionTree = data;
      //       if (this.sectionTree.length > 0) {
      //         if (this.detailType == 'build' && this.sectionTree.length == 1) {
      //           this.formBaseData.sectionId = this.sectionTree[0].id;
      //         }
      //         this.getParticipantUser()
      //       } else {
      //         this.formBaseData.sectionId = '';
      //       }
      //     } else {
      //       msgUtil.error2(res.data.message)
      //     }
      //   })
      // }
    },




    // 获取详情请求 api
    getDetail() {
      this.$httpGet(
        `buss/safetyPreJobEducation/getOne?id=${this.detailId}`,
        {}
      )
        .then(async (res) => {
          if (res.status == 1) {
            let data = res.data
            // 中间进行处理数据 然后赋值
            this.formBaseData = data
            this.formBaseData.companyId = res.data.companyId;
            this.getParticipantUser()
            if (this.formBaseData.participantUser != undefined && this.formBaseData.participantUser != '') {
              let arr3 = JSON.parse(this.formBaseData.participantUser);
              this.formBaseData.participantUser = arr3
            }

            this.$forceUpdate()
          } else {
            this.$messageError(res.data.message)
          }
        })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.$messageError(this.$route.name + '获取详情请求-请求失败')
        })
    },





    // 提交详情 提交1/暂存0 新建0/修改1
    submitDetail(type, callback) {
      let submit = '/buss/safetyPreJobEducation/submit'


      if (this.detailType === 'build') {
        submit = '/buss/safetyPreJobEducation/submit'
      } else {
        submit = '/buss/safetyPreJobEducation/resubmit'
      }
      let flag = true
      if (this.formBaseData.projectId == '0' && this.formBaseData.sectionId) {
        if (this.formBaseData.participantUser.length > 0) {
          flag = false
        }
      } else {
        if (this.formBaseData.participantUser.length > 0) {
          flag = false
        }
      }
      /* if(flag){
         this.$messageWarning("人员必选选择一个！")
         this.isLoading = false
         return ;
       }*/
      this.formBaseData.participantUser = JSON.stringify(this.formBaseData.participantUser);
      this.$httpPost(
        submit,
        this.formBaseData
      )
        .then((res) => {
          if (res.status == '1') {
            this.$messageSuccess('保存成功')
            this.detailId = res.data.id
            // this.detailId = !this.detailId ? res.data.id : this.detailId
            if (callback) callback()
          } else {
            this.isLoading = false
            this.$messageError(res.message)
          }
        })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.isLoading = false
          this.$messageError(this.$route.name + '提交详情-请求失败')
        })
    },

    // 点击各个流程的按钮事件
    handleClickDeal(type, res) {
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 重置表单验证

          if (this.$refs['formBaseData'] !== undefined) {
            this.$refs['formBaseData'].resetFields()
          }
          this.$set(this, 'fileList_video', [])
          this.$set(this, 'fileListArr', [])

          for (let k in this.fileSystemImg) {
            let fileProp = this.fileSystemImg[k]
            this.$refs[fileProp.compoName].cancelAll()
          }
          this.fileListArr = [],
            this.collapseList = [],
            this.biangengList = [],
            this.nowBiangengName = '',
            this.changeCommondIdTree = [], // 变更令下拉
            /*this.$refs['formBaseData'].resetFields()*/
            this.formBaseData = {
              id: '',
              participantUser: [],
              companyId: '',
              projectId: '',
              sectionId: '',
              typeId: '',
              titleName: '',
              trainingDate: '',//培训时间
              participantUser: '',//培训人
              trainingLocation: '',//培训地点
              remark: '',
            }

          this.buildUnitTable = [
            {
              stuffName: '附件',
              part: 'partOne',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true
            }
          ]
          this.detailId = ''
          this.companyTree = []
          this.projectTree = []
          this.sectionTree = []
          // 关闭弹窗
          this.formShow = false
          this.isShowBpmn = false
          break
        // 保存
        case 'submit':
          let flag = res.flag
          // 表单验证
          this.$refs['formBaseData'].validate((valid) => {
            if (valid) {
              // 再验证其他内容
              // 整理文件信息
              this.isLoading = true
              // 提交详情
              this.submitDetail(flag, () => {
                // 绑定文件到表单
                this.saveFiles()

                this.formShow = false
                this.isLoading = false
                this.$messageSuccess('保存成功')
                // 传值给父组件刷新列表
                this.$emit('reloadList')
              })
            } else {
              this.isLoading = false
            }
          })
          break

      }
    },

    /**
     *显示删除按钮
     * @param row
     */
    buttonDelShow(row) {
      let flag = false
      if (
        (this.detailType === 'build' || this.detailType === 'edit') &&
        row.file[0].realName !== '' &&
        !row.isNeed
      ) {
        flag = true
      }
      // 多文件上传的控制的控制
      if (row.isMulti) {
        flag = false
      }
      return flag
    },
    /**
     *控制显示暂无文件
     * @param row
     */
    showNone(row) {
      let flag = false
      if (
        this.detailType !== 'build' &&
        this.detailType !== 'edit' &&
        row.file[0].realName === ''
      ) {
        flag = true
      }
      // 经办人操作时
      // if ((this.detailType!=='build'&&this.detailType!=='edit'&&this.detailType!=='check')&&this.isReport) {
      //   flag=false
      // }
      return flag
    },
    /**
     * 控制查看按钮显示
     * @param row
     */
    buttonCheckShow(row) {
      let flag = false
      if (
        this.detailType !== 'build' &&
        this.detailType !== 'edit' &&
        row.file[0].realName !== ''
      ) {
        flag = true
      }
      // 经办人操作时
      // if ((this.detailType!=='build'&&this.detailType!=='edit'&&this.detailType!=='check')&&this.isReport) {
      //   flag=false
      // }
      // 多文件上传的控制的控制
      if (row.isMulti) {
        flag = false
      }
      return flag
    },
    /**
     * 控制上传按钮显示
     * @param row
     * @returns {boolean}
     */
    buttonUploadShow(row) {
      let flag = false
      if (this.detailType === 'build' || this.detailType === 'edit') {
        flag = true
      }
      return flag
    },
    tableChange(val) {
      this.$set(this, 'buildUnitTable', [...val])
    },

  }
}
</script>

<style scoped lang="scss">
.contract-ele {
  width: 100%;
}
.contract-ele-long {
  //   width: 280px;
  width: 98%;
}

.el-input .el-select {
  width: 130px;
}

.formTitle {
  font-weight: bold;
  font-size: 16px;
}

.hoverTxt {
  color: #008fe0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collapse-box {
  // padding:  0px 10px;
  margin-top: 20px;
}
.biangeng-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgba(221, 221, 221, 1);
  // justify-content: center;
  // align-items: center;
  .biangeng-box-item {
    // flex: 1;
    width: 50%;
    display: flex;
    align-items: center;
    font-size: 16px;
    .title1 {
      width: 50%;
      background: #f5f5f5;
      height: 42px;
      line-height: 42px;
      padding: 4px 24px;
      text-align: left;
      border: 1px solid rgba(221, 221, 221, 1);
      cursor: pointer;
    }
    .titleactivecss {
      background: #3879d9;
      color: #ffffff;
    }
    .title2 {
      width: 50%;
      text-align: left;
      height: 42px;
      line-height: 42px;
      padding: 4px 14px;
      border-top: 1px solid rgba(221, 221, 221, 0);
      border-bottom: 1px solid rgba(221, 221, 221, 1);
      border-right: 1px solid rgba(221, 221, 221, 1);
    }
  }
}
.title3 {
  height: 42px;
  line-height: 42px;
  padding: 4px 20px;
  border: 1px solid rgba(221, 221, 221, 1);
  font-size: 17px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #3d3d3d;
}
</style>
